import APIS from "@/api";
import C_ProFormDateTimeRangePicker from "@/components/Custom/C_ProFormDateTimeRangePicker";
import UploadImage, { UploadOneImage } from "@/components/Custom/UploadImage";
import { PlusOutlined } from "@ant-design/icons";
import {
  type ActionType,
  ModalForm,
  ModalFormProps,
  ProForm,
  ProFormDateTimePicker,
  ProFormDigit,
  ProFormSwitch,
  ProFormText,
  ProFormTextArea,
} from "@ant-design/pro-components";
import { useRequest } from "@umijs/max";
import { Button, Form, message } from "antd";
import dayjs from "dayjs";
import type { FC } from "react";

interface CreateFormProps extends ModalFormProps {
  reload?: ActionType["reload"];
}

const CreateForm: FC<CreateFormProps> = (props) => {
  const { reload } = props;
  const [form] = Form.useForm();

  const [messageApi, contextHolder] = message.useMessage();
  const { run } = useRequest(APIS.activity.save, {
    manual: true,
    onSuccess: () => {
      messageApi.success("操作成功");
      reload?.();
    },
    onError: () => {
      messageApi.error("操作失败!");
    },
  });

  return (
    <>
      {contextHolder}
      <ModalForm
        open={props.open}
        title={"操作"}
        layout={"horizontal"}
        labelCol={{
          flex: "100px",
        }}
        modalProps={{
          destroyOnClose: true,
        }}
        initialValues={props.initialValues}
        trigger={
          props.trigger || (
            <Button type="primary" icon={<PlusOutlined />}>
              新增
            </Button>
          )
        }
        onFinish={async (value) => {
          let weekdayNumber: number = dayjs(value.timeAt[0]).day();
          if (!weekdayNumber) {
            weekdayNumber = 7;
          }
          await run({
            id: props.initialValues?._id,
            ...value,
            weekdayNumber,
            weekdayStr: "星期" + "一二三四五六日"[weekdayNumber - 1],
            isWordDay: weekdayNumber <= 5,
          });
          return true;
        }}
        form={form}
      >
        <ProFormText
          label={"活动名称"}
          name="name"
          rules={[
            {
              required: true,
            },
          ]}
        />
        <C_ProFormDateTimeRangePicker
          label={"活动日期"}
          name="timeAt"
          rules={[
            {
              required: true,
            },
          ]}
          fieldProps={{
            style: {
              width: "100%",
            },
          }}
        />
        <ProFormText
          label={"活动链接"}
          name="link"
          rules={[
            {
              required: true,
            },
          ]}
        />
        <ProFormText label={"报名链接"} name="signLink" />
        <ProForm.Item label={"报名二维码"} name="signCode">
          <UploadOneImage
            hideCheckType={true}
            onChange={(v) => {
              // 检查表单中的link是否有值，没有则赋值
              const formValues = form.getFieldsValue();
              if (!formValues.link || formValues.link.trim() === "") {
                form.setFieldValue("link", v);
              }
            }}
          />
        </ProForm.Item>

        <ProFormText
          label={"活动区域"}
          tooltip={"如西城区,东城区,朝阳区,大望路这种一个大致范围"}
          name="area"
        />

        <ProFormText
          label={"详细地址"}
          tooltip={"活动通知后,确定的地址"}
          name="address"
        />
        <ProFormText
          label={"不精确地址"}
          tooltip={
            "活动一开始发出时候的地址,标记一个大致范围,比如某个地铁站附近"
          }
          name="impreciseAddress"
        />
        <ProFormText label={"主办单位"} name="organizerName" />
        <ProFormText label={"承办单位"} name="coOrganizerName" />
        <ProFormText label={"联系方式"} name="contactPeople" />
        <ProFormDigit
          label={"人数"}
          name="peopleNumber"
          min={1}
          max={99999}
          fieldProps={{
            precision: 0,
          }}
        />
        <ProForm.Item label={"活动介绍"} name="imgs" initialValue={[]}>
          <UploadImage />
        </ProForm.Item>
        <ProFormTextArea name="desc" label="活动描述" />
        <ProFormSwitch label={"是否可用"} name="enable" initialValue={true} />
        <ProFormDateTimePicker label={"截止报名时间"} name="signEndTime_" />
        <ProFormSwitch label={"可报名"} name="enableSign" initialValue={true} />
      </ModalForm>
    </>
  );
};

export default CreateForm;
